<template>
  <div class="dock-setting">
    <div v-if="!isShowDetail" class="card">
      <div v-for="item in enterpriseList" class="enterprise-item" :key="item.type">
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="button">
          <div class="title">{{ item.appName }}</div>
          <div class="describe">{{ item.appDesc }}</div>
          <div style="margin-top: 15px">
            <el-button v-if="ruleForm.stat !== 'auth'" plain type="primary" class="no-border" size="small" @click.stop="bindMsgClick(0)">立即绑定</el-button>
            <template v-else>
              <el-button plain class="no-border" type="primary" size="small" @click.stop="bindMsgClick(0)">查看配置</el-button>
              <el-button plain class="no-border" type="primary" size="small" @click.stop="bindMsgClick(3)">同步通讯录</el-button>
            </template>
          </div>
        </div>
      </div>
    </div>
    <bindMsg ref="bindMsg" @back="getAuthInfo" @changeMsg="changeMsg" v-else @finish="getAuthInfo" :message="ruleForm"></bindMsg>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import { commonAction } from '@/utils/common'
import bindMsg from './bingMsg.vue'
@Component({
  name: 'dockSetting',
  components: {
    continer,
    bindMsg
  }
})
export default class DockSetting extends Vue {
  private ruleForm: any = {
    stat: ''
  };

  private isShowDetail = false

  private enterpriseList: any = [
    {
      appName: '企业微信',
      img: '/img/Frame-8031.png',
      appDesc: '绑定后，同步企业微信的人员名单和组织结构',
      type: 'wx_work',
      link: '企业微信绑定参考教程？',
      router: '/configuration'
    }
  ]

  private changeMsg (data: any) {
    this.ruleForm = data
  }

  private getAuthInfo () {
    this.isShowDetail = false
    commonAction({
      url: '/server-public/action/wx-suite/auth-info',
      method: 'get'
    }).then(res => {
      if (res.success) {
        this.ruleForm = res.data
      }
    })
  }

  private bindMsgClick (step: number) {
    this.isShowDetail = true;
    this.$nextTick(() => {
      (this.$refs as any).bindMsg.changeStep(step)
    })
  }

  private mounted () {
    this.getAuthInfo()
  }
}
</script>
<style lang="stylus" scoped>
.dock-setting
  height 100%
  width 100%
  background #FFFFFF
  box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
  border-radius 10px
  overflow-y: auto;
  .enterprise-item {
    margin-right: 25px;
    width: 320px;
    height: 240px;
    border-radius: 10px;
    border: 1px solid #E7E9ED;
    box-shadow: 0px 1px 8px 0px rgba(224,230,240,0.7);
    &:hover {
      box-shadow 0px 0px 16px rgba(0, 0, 0, 0.1)
    }
    .img {
      width: 100%;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px 15px 0px;
      img {
        width: 300px;
        height 120px
      }
    }
    .title {
      font-weight: 600;
      color: #303753;
      font-size 14px
      margin-bottom 12px
    }
    .describe {
      font-size 12px
      line-height 14px
      font-weight: 400;
      color: #767E91;
    }
  }
  .button {
    padding-left: 10px
    .no-border {
      border: none;
    }
  }
.card {
  padding: 24px
}
</style>
